<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>跳动的♥</title>
    <style>
        * {
            margin: 0;
            padding: 0
        }

        .one {
            position: relative;
            top: 6rem;
            display: grid;
            grid-template-columns: repeat(4, 25%);
            grid-template-rows: repeat(3, 15rem);
            background-color: pink;
        }

        .line {
            border: 1px solid red;
            position: relative;
            display: grid;
            grid-template-columns: 1fr;
            grid-template-rows: 1fr;
            place-items: center;

        }

        /*  ------------------ 心跳 heart-------------------------------------   */
        .heart {
            position: relative;
            top: 1.5rem;
            background-color: yellowgreen;
            width: 6rem;
            height: 6rem;
            /* 旋转45° */
            transform: rotate(45deg);
            /* 阴影 */
            box-shadow: 0 0 1rem red;
            /* animation:动画   alternate:轮流   infinite:无限 */
            animation: heartbit 2s alternate infinite;
        }

        .heart::before {
            display: block;
            content: '';
            width: 6rem;
            height: 6rem;
            background: black;
            position: absolute;
            top: -6rem;
            border-radius: 3rem 3rem 0 0;
            box-shadow: 0 0 1rem red;
        }

        .heart::after {
            display: block;
            content: '';
            width: 6rem;
            height: 6rem;
            background: red;
            position: absolute;
            left: -6rem;
            border-radius: 3rem 0 0 3rem;
            box-shadow: 0 0 1rem red;

        }

        @keyframes heartbit {
            0% {
                transform: rotate(45deg) scale(0.5);
            }
            100% {
                transform: rotate(90deg) scale(1.1);
            }
        }



    </style>
</head>
<body>
<div class="one">
    <!-- 第1行  一行4列 -->
    <div class="line">
        <div class="heart"></div>
    </div>


</div>
<!--
 将♥分割成一个正方形和2个半圆;
 一个div元素+2个伪元素(:before + :after)
 适当旋转45°,得到♥
 -->
<!--<div class="heart"></div>-->
</body>
</html>